<template>
  <div ref="chart">
    <div>
      <!-- 表头 -->
      <van-nav-bar
        class="title_bgc"
        title="商品详情"
        left-arrow
        @click-left="$router.back()"
      />
    </div>
    <div>
      <!-- 轮播图 -->
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="item in img_url" :key="item.id">
          <div class="lunbotu">
            <img v-lazy="item.img_url" />
          </div>
        </van-swipe-item>
      </van-swipe>
      <!-- 小标签 -->
      <div class="xiaobiaoqian">
        <span>30天快速退货</span>
        <span>48小时快速退款</span>
        <span>满88元免邮费</span>
      </div>
      <!-- 商品说明 -->
      <div class="info-jjg">
        <h1 style="font-weight: 400; margin-bottom: 4px">{{ info.name }}</h1>
        <div style="color: #999; margin-bottom: 20px">
          {{ info.goods_brief }}
        </div>
        <span style="color: red; font-size: 20px"
          >￥ {{ info.retail_price }}</span
        >
      </div>
      <!-- 规格数量 -->
      <div class="guige" @click="dialogShow = true">
        <span>请选择规格数量</span>
        <van-icon name="arrow" style="margin-top: 2px" />
      </div>
      <!-- 购物弹出层 -->
      <!-- <van-sku
        v-model="show"
        :sku="sku"
        :goods="goods"
        :goods-id="goodsId"
        :quota="quota"
        :quota-used="quotaUsed"
        :hide-stock="sku.hide_stock"
        @buy-clicked="onBuyClicked"
        @add-cart="onAddCartClicked"
      >
        <template></template>
      </van-sku> -->
      <van-popup
        v-model="dialogShow"
        position="bottom"
        class="popup_info"
        closeable
        round
        :style="{ height: '70%' }"
      >
        <van-row class="van-sku">
          <!-- 商品详情 -->
          <van-row class="info">
            <img class="img" :src="picUrl || info.primary_pic_url" alt="" />
            <van-row class="c">
              <van-row class="p"
                >￥
                <span>{{
                  col.retail_price || info.retail_price
                }}</span></van-row
              >
              <van-row class="s"
                >剩余:{{ col.goods_number || info.goods_number }} 件</van-row
              >
              <van-row v-if="text" class="a">已选择: {{ text }}</van-row>
            </van-row>
          </van-row>
          <!-- /商品详情 -->
          <!-- 商品颜色 -->
          <van-row class="spec-item">
            <van-row v-for="item in specificationList" :key="item.id">
              <van-row class="name">{{ item.name }}</van-row>
              <van-row class="values">
                <van-row
                  v-for="val in item.valueList"
                  :key="val.id"
                  class="value"
                  :data-row="item.specification_id - 1"
                  :data-id="val.id"
                  :test="arr[item.specification_id - 1] === val.id"
                  :test1="arr[item.specification_id - 1]"
                  @click="change($event)"
                  :class="[
                    arr[item.specification_id - 1] === val.id ? 'selected' : '',
                  ]"
                  >{{ val.value }}</van-row
                >
              </van-row>
            </van-row>
          </van-row>
          <!-- /商品颜色 -->
          <!-- 商品规格 -->
          <!-- <van-row class="spec-item">
            <van-row class="name">规格</van-row>
            <van-row class="values">
              <van-row class="value selected">大</van-row>
              <van-row class="value">中</van-row>
              <van-row class="value">小</van-row>
            </van-row>
          </van-row> -->
          <!-- /商品规格 -->
          <!-- 购买数量 -->
          <van-row class="number-item">
            <van-row class="name">购买数量</van-row>
            <van-row class="selnum">
              <van-row class="cut" @click="delNUM">-</van-row>
              <input type="number" v-model="number" class="number" />
              <van-row class="add" @click="addNUM">+</van-row>
            </van-row>
          </van-row>
          <!-- /购买数量 -->
          <!-- 底部按钮 -->
          <van-row class="button-click">
            <van-row class="c">立即购买</van-row>
            <van-row @click="joinShopping" class="r">加入购物车</van-row>
          </van-row>
          <!-- /底部按钮 -->
        </van-row>
      </van-popup>
      <!-- 商品参数 -->
      <div class="goods-attr" v-if="attribute.length !== 0">
        <div class="t">商品参数</div>
        <div class="l" id="gg">
          <div class="cc" v-for="item in attribute" :key="item.id">
            <span class="nj">{{ item.name }}</span>
            <span>{{ item.value }}</span>
          </div>
        </div>
      </div>
      <!-- 图片拼接 -->
      <div id="info" v-html="info.goods_desc" class="img-size">
        <!-- <p v-html="info.goods_desc"></p> -->
      </div>
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <!-- 常见问题 -->
      <div class="common-problem">
        <div class="h">
          <div class="line"></div>
          <span class="title">常见问题</span>
          <div class="line"></div>
        </div>
        <div class="b" id="wt">
          <div class="item" v-for="item in issue" :key="item.id">
            <div class="question-box">
              <span class="spot"></span>
              <span class="question">{{ item.question }} </span>
            </div>
            <div class="answer">{{ item.answer }}</div>
          </div>
        </div>
      </div>
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <!-- 大家都在看，关联商品 -->
      <div class="related-goods">
        <div class="line"></div>
        <span class="title">大家都在看</span>
        <div class="line"></div>
      </div>
      <!-- 列表展示 -->
      <!-- ------------- -->
      <van-grid :column-num="2" :border="false">
        <div v-for="item in goodsList" :key="item.id">
          <van-grid-item @click.native="init" :to="'/goodsDetail/' + item.id">
            <template slot="icon">
              <van-image :src="item.list_pic_url" />
            </template>
            <template slot="text">
              <span style="margin-bottom: 10px; font-size: 13px">{{
                item.name
              }}</span>
              <span style="color: red; font-size: 16px"
                >￥ {{ item.retail_price }}</span
              >
            </template>
          </van-grid-item>
        </div>
      </van-grid>
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <!-- 底部按钮区域 -->
      <div>
        <van-goods-action>
          <van-goods-action-icon
            icon="cart-o"
            @click="isShopping"
            :badge="shoppingCount"
            text="购物车"
          />
          <van-goods-action-icon
            @click="isSave"
            :icon="userHasCollect ? 'star' : 'star-o'"
            :text="userHasCollect ? '已收藏' : '未收藏'"
            color="#ff5000"
          />
          <van-goods-action-button
            @click="dialogShow = true"
            type="warning"
            text="加入购物车"
          />
          <van-goods-action-button type="danger" text="立即购买" />
        </van-goods-action>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getGoodsDetailList,
  getGoodsRelatedList,
  getAddordelete,
  getShoppingCount,
  addShoppingCount,
} from "@/api/yangyang/Classify";
import Vue from "vue";
import { Lazyload } from "vant";
Vue.use(Lazyload);
import store from "@/store";
export default {
  name: "goodsDetail",
  data() {
    return {
      productId: null, //产品ID
      picUrl: "", //默认图
      text: "",
      col: {},
      productList: [],
      arr: [],
      isActive: false, // 用来判断active样式类是否显示
      specificationList: [],
      number: 1,
      dialogShow: false, //	是否显示商品规格弹窗
      img_url: [], //轮播图数据
      info: {}, //详细介绍的数据
      attribute: [], //商品参数
      issue: [], //常见问题
      userHasCollect: "", //收藏
      shoppingCount: "", //购物车数量

      goods: {}, //商品信息
      goodsId: "", //商品 id
      quota: 0, // 限购数，0 表示不限购
      quotaUsed: 0, //	已经购买过的数量
      hidestock: false, //是否显示商品剩余库存
      goodsList: [], //大家一起看推荐的图片数据列表
      show: false,
    };
  },
  created() {
    this.getGoodsDetailList();
    this.getGoodsRelatedList();
    this.getShoppingCount();
    this.changeAttrInfo();
    // this.change();
  },
  methods: {
    // 点击加入购物车
    async joinShopping() {
      // console.log(this.arr);
      if (this.arr) {
        // 判断是否有token
        if (!this.$store.getters.token) {
          this.$router.push("/login");
        }
        if (this.productList.length === 1) {
          this.col = this.productList[0].id;
          // console.log(this.col);
          await addShoppingCount({
            goodsId: this.info.id,
            number: this.number,
            productId: this.col,
          });
          this.$toast.success("添加购物车成功");
          // this.$router.push("/shopping");
          this.$router.go(0);
          this.dialogShow = false;
        } else {
          this.col = this.productList.find(
            (item) => item.goods_specification_ids === isStr
          );
          // 登录之后发送请求
          await addShoppingCount({
            goodsId: this.info.id,
            number: this.number,
            productId: this.productId,
          });
          this.$toast.success("添加购物车成功");
          // this.$router.push("/shopping");
          this.$router.go(0);
          this.dialogShow = false;
        }
      }
    },
    // 切换商品信息
    changeAttrInfo() {
      // setTimeout(() => {
      //   console.log(this.$refs);
      //   console.log(this.$refs.chart.__vue__);
      // });
      // console.log(this.$refs);
    },
    // 点击切换样式
    change(e) {
      // console.log("123", e);
      let { row, id } = e.target.dataset;
      let checkAttrIds = this.arr;
      row = row - 0;
      id = id - 0;
      // checkAttrIds[row] = id;
      this.arr = checkAttrIds.map((item) => item);
      this.arr[row] = id;
      // console.log(row, id);
      // this.changeAttrInfo();
      let isStr = this.arr.join("_");
      this.col = this.productList.find(
        (item) => item.goods_specification_ids === isStr
      );
      // if (this.productList.length === 0) {

      // } else {

      // }
      console.log(this.productList);
      this.productId = this.col.id;
      this.arrText = this.arr.map((item, index) => {
        let hang = this.specificationList[index].valueList.find(
          (val) => val.id === item
        );
        if (hang.pic_url) {
          this.picUrl = hang.pic_url;
        }

        return hang.value;
      });
      this.text = this.arrText.join(",");
    },

    // 减少购物车数量
    delNUM() {
      if (this.number === 1) {
        this.number = 1;
      } else {
        this.number--;
      }
    },
    // 增加购物车数量
    addNUM() {
      this.number++;
    },
    // 点击购物车
    isShopping() {
      if (!this.$store.getters.token) {
        this.$router.push("/login");
      } else {
        this.$router.push("/shopping");
      }
    },
    // 购物车数量
    async getShoppingCount() {
      if (this.$store.getters.token) {
        let res = await getShoppingCount();
        this.shoppingCount = res.data.data.cartTotal.goodsCount;
      }
    },
    // 收藏和取消收藏
    async isSave() {
      // 这里有token后需要取反
      if (!this.$store.getters.token) this.$router.push("/login");
      let res = await getAddordelete({
        typeId: 0,
        valueId: parseInt(this.$route.params.detailId),
      });

      if (res.data.data.type === "add") {
        this.$toast("收藏成功");
        this.getGoodsDetailList();
      } else if (res.data.data.type === "delete") {
        this.$toast("取消收藏成功");
        this.getGoodsDetailList();
      }
    },
    // 刷新页面
    init() {
      this.$router.go(0);
    },
    async getGoodsDetailList() {
      let res = await getGoodsDetailList(parseInt(this.$route.params.detailId));
      this.img_url = res.data.data.gallery;
      // this.picUrlt = res.data.data.gallery[0].img_url;

      this.info = res.data.data.info;
      this.issue = res.data.data.issue;
      this.attribute = res.data.data.attribute;
      this.userHasCollect = res.data.data.userHasCollect;
      this.specificationList = res.data.data.specificationList;
      this.productList = res.data.data.productList;
      console.log(res);

      console.log(this.specificationList);
      this.arr = this.specificationList.map((item) => {
        return item.valueList[0].id;
      });
      console.log(this.arr);
    },
    async getGoodsRelatedList() {
      let res = await getGoodsRelatedList(
        parseInt(this.$route.params.detailId)
      );
      this.goodsList = res.data.data.goodsList;
    },
    // //   点击购买回调
    // onBuyClicked() {},
    // // 点击添加购物车回调
    // onAddCartClicked() {},
  },
};
</script>

<style
lang="less" scoped>
.van-sku .img {
  width: 200px;
  height: 200px;
}
.selected {
  color: red;
  border: 1px solid red;
}
.button-click .r {
  width: 360px;
  height: 80px;
  color: #fff;
  line-height: 80px;
  text-align: center;
  font-size: 30px;
  border-radius: 0px 40px 40px 0px;
  background: linear-gradient(#ffce1e, #ff8917);
}
.button-click .c {
  width: 360px;
  height: 80px;
  color: #fff;
  font-size: 30px;
  line-height: 80px;
  border-radius: 40px 0px 0px 40px;
  text-align: center;
  background: linear-gradient(#fe5f33, #ee0b24);
}
.button-click {
  display: flex;
  justify-content: space-around;
  /* margin-top: 160px; */
  margin: 160px 20px 0 20px;
}
.number-item .selnum .add {
  background-color: #f7f8fa;
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  margin-top: 6px;
}
.number-item .selnum .cut {
  background-color: #f7f8fa;
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  margin-top: 6px;
}
.number-item .selnum {
  display: flex;
  align-items: center;
}
.number-item .number {
  width: 40px;
  outline: none;
  border: 0;
  background-color: #f2f3f5;
  padding: 10px 18px;
  margin-left: 20px;
  margin-right: 20px;
}
.number-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 66px;
}
.spec-item {
  border-bottom: 1px solid #f6f7f8;
  margin: 0 20px;
  padding-bottom: 20px;
}
.spec-item .name {
  margin-left: 46px;
  margin-top: 20px;
  margin-bottom: 28px;
  font-size: 28px;
}
.spec-item .values .value {
  background-color: #f7f8fa;
  padding: 12px 20px;
  margin-left: 20px;
  border-radius: 10px;
}
.spec-item .values {
  display: flex;
  margin-left: 30px;
}
.spec-item {
  display: flex;
  flex-direction: column;
}
.van-sku .info {
  border-bottom: 1px solid #f6f7f8;
  margin: 0 20px;
}
.van-sku .info .c .a {
  color: #969799;
}
.van-sku .info .c .s {
  margin-top: 20px;
  margin-bottom: 20px;
  color: #969799;
}
.van-sku .info .c .p {
  font-size: 50pxs;
  color: red;
}
.van-sku .info .c .p span {
  font-size: 40px;
  color: red;
}
.van-sku .info .c {
  margin-left: 30px;
  margin-top: 30px;
}
.van-sku .info {
  display: flex;
  padding: 50px 50px;
}
.van-sku {
  display: flex;
  flex-direction: column;
}
/deep/ .van-grid > div {
  width: 370px;
  font-size: 13px !important;
}
/deep/ .van-grid-item__content van-grid-item__content--center {
  font-size: 13px !important;
}
/deep/ .van-image__img {
  width: 240px;

  height: 160px;
  text-align: center;
  margin-bottom: 30px;
}
.goods_info {
  width: 100%;
  height: 1000px;
}
.related-goods {
  display: flex;
  font-size: 38px;
  justify-content: center;
  align-items: center;
}
.related-goods .title {
  margin: 0 9px;
}
.related-goods .line {
  height: 4px;
  width: 1.06667rem;
  background-color: #ccc;
}
.common-problem .b .item .question {
  margin-left: 6px;
  margin-bottom: 24px;
}
.common-problem .h {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 40px;
  margin-bottom: 40px;
}
.common-problem .h .title {
  margin: 0 9px;
}
.common-problem .h .line {
  height: 4px;
  width: 1.06667rem;
  background-color: #ccc;
}
.common-problem .b {
  padding: 0 28px;
}
.common-problem .b .item {
  font-size: 28px;
}
.common-problem .b .item .spot {
  float: left;
  display: block;
  height: 0.10667rem;
  width: 0.10667rem;
  background: #b4282d;
  border-radius: 50%;
  margin-top: 0.14667rem;
}
.common-problem .b .item .answer {
  color: #787878;
  margin-left: 10px;
  margin-top: 10px;
  margin-bottom: 20px;
}
.img-size {
  width: 100%;
  margin-top: 60px;
}
/deep/ #info p {
  margin: -6px 0px;
}
/deep/ #info p img {
  width: 100%;
}
.goods-attr {
  background-color: #fff;
  width: 750px;
  /* padding: 0 11px; */
}
.goods-attr .t {
  margin-top: 55px;
  margin-left: 10px;
  font-size: 36px !important;
}
.goods-attr .l {
  display: flex;
  flex-direction: column;
  padding: 0 11px;
}
.goods-attr .l .cc {
  background-color: #f3f3f3;
  margin-bottom: 11px;
  margin-top: 22px !important;
  line-height: 60px;
}
.goods-attr .nj {
  color: #999;
  margin-right: 20px;
}
.goods-attr .l span {
  font-size: 28px !important;
}
/deep/ .van-image {
  display: inline-block;
}

.title_bgc {
  background-color: red;
  color: #fff;
  position: fixed;
  width: 100%;
}
/deep/ .van-icon-arrow-left:before {
  color: #fff;
}
/deep/ .van-nav-bar__title {
  color: #fff;
}
.lunbotu {
  width: 818px;
  height: 818px;
}
.van-goods-action {
  width: 750px;
}
.xiaobiaoqian {
  display: flex;
  position: relative;
  justify-content: space-around;
  background-color: #f4f4f4;
  margin-top: 4px;
  color: #666;
  height: 44px;
  line-height: 44px;
}
.info-jjg {
  display: flex;
  flex-direction: column;
  text-align: center;

  font-weight: 400;
}
.guige {
  display: flex;
  font-size: 32px;
  /* padding: 0 16px; */
  margin: 0px 16px;
  justify-content: space-between;
  margin-top: 20px;
  align-items: center;
  border-top: 2px solid #eee;
}

.bottom-btn {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 10;
  width: 375px;
  height: 50px;
  display: flex;
  background: #fff;
}

.bottom-btn .l {
  float: left;
  height: 50px;
  width: 81px;
  border: 1px solid #f4f4f4;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bottom-btn .l.l-collect {
  border-right: none;
  border-left: none;
  text-align: center;
}

.bottom-btn .l.l-cart .box {
  position: relative;
  height: 30px;
  width: 30px;
}

.bottom-btn .l.l-cart .cart-count {
  height: 14px;
  width: 14px;
  z-index: 10;
  position: absolute;
  top: 0;
  right: 0;
  background: #b4282d;
  text-align: center;
  font-size: 9px;
  color: #fff;
  line-height: 14px;
  border-radius: 50%;
}

.bottom-btn .l.l-cart .icon {
  position: absolute;
  top: 5px;
  left: 0;
}

.bottom-btn .l .icon {
  display: block;
  height: 22px;
  width: 22px;
}

.bottom-btn .c {
  float: left;
  height: 50px;
  line-height: 48px;
  flex: 1;
  text-align: center;
  color: #333;
  border-top: 1px solid #f4f4f4;
  border-bottom: 1px solid #f4f4f4;
}

.bottom-btn .r {
  border: 1px solid #b4282d;
  background: #b4282d;
  float: left;
  height: 50px;
  line-height: 48px;
  flex: 1;
  text-align: center;
  color: #fff;
}
</style>